<template>
    <div class="stocklistcontainer">
        <div class="toubu">
            <div class="tl">
                <span :class="headertab == 0 ? 'xuank' : ''" @click="headertab = 0">{{ $t('hj305') }}</span>
                <!-- <span :class="headertab == 1 ? 'xuank' : ''" @click="headertab = 1">可转债</span> -->
            </div>
            <a class="tr" @click="getsearch"></a>
        </div>
        <div class="othermain">
            <div class="daboxk">
                <div class="bankuai">
                    <div class="erty" v-for="(i,index) in listArr1"  @click="goBanKuaiDetail(i)" :key="i.id" v-if="index<3" :class="i.floatRate > 0 ? 'redbg' : 'greenbg'">
                        <h3  :class="i.floatRate > 0 ? 'red' : 'green'">{{i.currentPoint}}</h3>
                        <h5>{{i.indexName}}<a :class="i.floatRate > 0 ? 'red' : 'green'">{{i.floatRate}}%</a></h5>
                    </div>


                </div>
            </div>
            <div class="poklk">
                <span>{{ $t('hj310') }}</span>
                <a></a>
            </div>
            <div class="renmen">
                <div class="dangeh">
                    <div class="dank" v-for="(item,index) in listArr" v-if="(index<6)" @click="goDetail(item)">
                        <h6>{{item.name}}</h6>
                        <p class="zhangl" :class="item.changepercent>0? 'red':'green'">{{item.buy}}</p>
                        <p class="bili" :class="item.changepercent>0? 'red':'green'">{{item.pricechange}} {{item.changepercent}}%</p>
                    </div>
                </div>
            </div>
            <div class="zhnj" @click="onClick">
                <span v-for="(item, index) in diefuList" :key="index" :class="diefuidx == index ? 'xuan' : ''"
                    @click="diefuidx = index">{{ item.name }}</span>
                <a class="pokl" :style="diefuidx == 0 ? 'left:10%' : diefuidx == 1 ? 'left:30%' : ''"></a>
            </div>
            <div class="kanbox">
                <span class="k1">{{ $t('hj283') }}</span>
                <span class="k2">{{ $t('hj312') }}</span>
                <span class="k2">{{ $t('hj313') }}</span>
                <span class="k4">{{ $t('hj314') }}</span>
            </div>
            <div class="kfgfd"></div>
            <div class="everylistmain">
                <van-list v-model="loading" :finished="finished" :finished-text="$t('hj43')" v-if="(diefuidx==0)"
              :immediate-check="false">
                <div class="shujuk" v-for="(item, index) in listArr"  :key="index" @click="goDetail(item)">
                    <div class="s1">
                        <h6>{{item.name}}</h6>
                        <p>
                            <span v-if="(item.symbol.indexOf('sz')>=0)">{{ $t('hj315') }}</span>
                            <span class="sh" v-if="(item.symbol.indexOf('sh')>=0)">{{ $t('hj316') }}</span>
                            <span class="bj"  v-if="(item.symbol.indexOf('bj')>=0)">{{ $t('hj317') }}</span>
                            <a class="shbg">{{item.symbol}}</a>
                        </p>
                    </div>
                    <div class="s2 " :class="item.changepercent>0?'hqred':'hqgreen'">{{Number(item.buy).toFixed(2)}}</div>
                    <div class="s2 " :class="item.changepercent>0?'hqred':'hqgreen'">{{item.changepercent}}%</div>
                    <div class="s4"><a  :class="item.changepercent>0?'hqredbtnbg':'hqgreenbtnbg'">{{item.pricechange}}</a></div>
                </div>
                </van-list>
              <van-list v-model="loadings" :finished="finisheds" :finished-text="$t('hj43')" v-if="(diefuidx==1)"
              :immediate-check="false">
                <div class="shujuk" v-for="(item, index) in listArrs"  :key="index" @click="goDetail(item)">
                    <div class="s1">
                        <h6>{{item.name}}</h6>
                        <p>
                            <span v-if="(item.symbol.indexOf('sz')>=0)">{{ $t('hj315') }}</span>
                            <span class="sh" v-if="(item.symbol.indexOf('sh')>=0)">{{ $t('hj316') }}</span>
                            <span class="bj"  v-if="(item.symbol.indexOf('bj')>=0)">{{ $t('hj317') }}</span>
                            <a class="shbg">{{item.symbol}}</a>
                        </p>
                    </div>
                    <div class="s2 " :class="item.changepercent>0?'hqred':'hqgreen'">{{Number(item.buy).toFixed(2)}}</div>
                    <div class="s2 " :class="item.changepercent>0?'hqred':'hqgreen'">{{item.changepercent}}%</div>
                    <div class="s4"><a  :class="item.changepercent>0?'hqredbtnbg':'hqgreenbtnbg'">{{item.pricechange}}</a></div>
                </div>
                </van-list>
                <!-- <div class="shujuk">
                    <div class="s1">
                        <h6>格利尔</h6>
                        <p>
                            <span style="display: none;">深</span>
                            <span class="sh" style="display: none;">沪</span>
                            <span class="bj" style="">北</span>
                            <a class="bjbg">BJ831641</a>
                        </p>
                    </div>
                    <div class="s2 hqred">12.65</div>
                    <div class="s2 hqred">+31.77%</div>
                    <div class="s4"><a class="hqredbtnbg">3.05</a></div>
                </div> -->
                <!-- <div class="shujuk" v-for="i in 6">
                    <div class="s1">
                        <h6>安奈儿</h6>
                        <p><span style="">深</span><span class="sh" style="display: none;">沪</span><span class="bj"
                                style="display: none;">北</span><a class="">SZ002875</a></p>
                    </div>
                    <div class="s2 hqred">19.12</div>
                    <div class="s2 hqred">+10.01%</div>
                    <div class="s4"><a class="hqredbtnbg">1.74</a></div>
                </div> -->
            </div>
        </div>
        <div style="height:1.5rem"></div>
    </div>
</template>
<script>
import * as api from '@/axios/api'
export default {
    components: {

    },
    props: {},
    data() {
        return {
            headertab: 0,
            diefuList: [
                {
               name: '涨幅榜',
                },
                {
                    name: '跌幅榜',
                }
            ],
            diefuidx: 0,
            listArr: [],
            listArr1: [],
            listArrs: [],
            pageNum: 1,
            finished: false,
            loading: false,
            pageNums: 1,
            finisheds: false,
            loadings: false,
            timer: null,
            timer1: null,
            timer2: null,
            isCurrentRoute: true,  // 解决：当轮询未返回结果时，切换路由后，timer清除不掉问题
            isCurrentRoute1: true,  // 解决：当轮询未返回结果时，切换路由后，timer清除不掉问题
            isCurrentRoute2: true,  // 解决：当轮询未返回结果时，切换路由后，timer清除不掉问题
        }
    },
    mounted() {
      this.getListMarket();
      this.getStock();
    },
    beforeDestroy()
    {
      this.isCurrentRoute = false;
      this.isCurrentRoute1 = false;
      this.isCurrentRoute2 = false;
      clearTimeout(this.timer);
      clearTimeout(this.timer1);
      clearTimeout(this.timer2);
      this.timer = null;
      this.timer1 = null;
      this.timer2 = null;
    },
  methods: {
        // goDetail(item){

        //     var type = item.symbol.substring(0,2)
        //     this.$router.push({path:'/kline',query:{
        //             code:item.code,
        //             type:type,
        //         }})
        // },
      async getListMarket() {
      let val = {
        pageNum: 1,
        pageSize: 15
      };
      // 获取指数列表
        await api.getListMarket(val).then(result => {
          this.loading = false;
          if (result.status === 0) {
            this.listArr1 = result.data;
            if (this.isCurrentRoute) {
              this.timer = setTimeout(async () => {
                await (this.timer && clearTimeout(this.timer));
                await this.getListMarket();
              }, 3000)
            }
          } else {
            this.texts = result.msg;
            this.alertShow = true;
            clearTimeout(this.timer);
          }
        });
    },
    getsearch() {
            this.$router.push({
                path: '/Searchlist'
            })
        },
    onClick() {
      switch (this.diefuidx) {
        case 0:
          this.isCurrentRoute2 = false
          clearTimeout(this.timer2);
          this.getStock();
          break;
        case 1:
          this.isCurrentRoute1 = false
          clearTimeout(this.timer1);
          this.getStocks();
          break;
      }
    },
    /*onLoad() {
      this.pageNum++;
      clearTimeout(this.timer1);
      clearTimeout(this.timer2);
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      switch (this.diefuidx) {
        case 0:
        //   this.stockPlate = "";
        //   this.stockType = "";
          this.loading = true;
          this.getStock();
          break;
      }
    },
    onLoads() {
      this.pageNums++;
      clearTimeout(this.timer1);
      clearTimeout(this.timer2);
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      switch (this.diefuidx) {
        case 1:
          this.loadings = true;
          this.getStocks();
          break;
      }
    },*/
    async getStock() {
      //沪深升序
      let opt = {
        pageNo: 1,
        pageSize: 100,
        asc:0,
        sort: 'changepercent',
        node: 'hs_a',
        // stockPlate: this.stockPlate,
        // keyWords: this.gpcode,
        // stockType: this.stockType
      };

      await api.getStockSort(opt).then(data => {
        this.loading = false;
        this.finished = true;
        if (data.status === 0) {
          if (data.data.length < 15) {
            this.finished = true;
          }
          if (this.diefuidx === 0) {
            this.listArr = [];
            data.data.forEach(element => {
              this.listArr.push(element);
            });
            console.log(this.listArr)

            if (this.isCurrentRoute) {
              this.timer1 = setTimeout(async () => {
                await (this.timer1 && clearTimeout(this.timer1));
                await this.getStock();
              }, 3000)
            }
          }
        } else {
          this.texts = data.msg;
          this.alertShow = true;
          clearTimeout(this.timer1)
        }

      });

    },
    async getStocks() {
      //沪深降序
      let opt = {
        pageNo: 1,
        pageSize: 100,
        asc:1,
        sort: 'changepercent',
        node: 'hs_a',
        // stockPlate: this.stockPlate,
        // keyWords: this.gpcode,
        // stockType: this.stockType
      };
      await api.getStockSort(opt).then(data => {
        this.loadings = false;
        this.finisheds = true;
        this.finished = true;
        if (data.status === 0) {
          if (data.data.length < 15) {
            this.finisheds = true;
          }
          this.listArrs = [];
          data.data.forEach(element => {
            this.listArrs.push(element);
          });
          if (this.isCurrentRoute) {
            this.timer2 = setTimeout(async () => {
              await (this.timer2 && clearTimeout(this.timer2));
              await this.getStocks();
            }, 3000)
          }
        } else {
          // this.texts = data.msg;
          // this.alertShow = true;
          clearTimeout(this.timer2)
        }

      });
    },
    //进入详情
    goDetail(item) {
      var codes = "";
      var names = "";
      var stock_type = "";
      var soks = "";
      var if_zhishu = '0';
      var if_us = '';
      codes = item.code;
          names = item.name;
          stock_type = item.symbol.substring(0, 2);
          soks =  this.filterSH(item.symbol);
          if_zhishu = '0';
          if_us = item.stock_type == 'us' ? '1' : '';
      this.$router.push({
        path: "/kline",
        query: {
          name: names,
          stockplate: item.stock_plate,
          code: codes,
          type: stock_type,
          sok: soks,
          if_us: if_us,
          usType: item.type,
          if_zhishu: if_zhishu,
        }
      });
    },
    goBanKuaiDetail(i) {
      var item = {};
      item.code = i.indexGid;
      item.name = i.indexName;
      item.symbol = i.indexGid;
      this.goDetail(item)
    },
    filterSH(val) {
      if (val.indexOf('sh')>=0) {
        return 1;
      } else if (val.indexOf('bj')>=0 || val.indexOf('sz')>=0) {
        return 0;
      }
    },
    }
}
</script>


<style lang="less" scoped>
.red {
    color: #ff5353 !important;
}

.green {
    color: #20b844 !important;
}

.hqred {
    color: #f11614 !important;
}

.hqgreen {
    color: #09965f !important;
}

.redbg {
    background: #fdf7f7 !important;
}

.greenbg {
    background: #f4faf8 !important;
}

.stocklistcontainer {}

.toubu {
    width: 100%;
    height: 1.60rem;
    background: linear-gradient(#517afa);
    display: flex;
    justify-content: space-between;

    .tl {
        margin-left: 0.32rem;
        margin-top: 0.37rem;

        span {
            color: #fff;
            font-size: .37rem;
            margin-right: 0.53rem;
            vertical-align: bottom;
        }

        .xuank {
            font-size: .48rem;
        }
    }

    .tr {
        width: 0.43rem;
        height: 0.43rem;
        background: url() no-repeat 50%;
        background-size: 100%;
        margin-right: 0.40rem;
        margin-top: 0.32rem;
    }
}

.othermain {
    .daboxk {
        width: 100%;
        background: #fff;
        margin-top: -0.32rem;
        min-height: 1.07rem;
        border-radius: 0.4rem 0.4rem 0 0;
        padding-top: 0.4rem;

        .bankuai {
            width: 9.32rem;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;

            .erty {
                width: 2.99rem;
                height: 2.14rem;
                background: #ffffff;
                border-radius: 0.21rem;
                text-align: center;

                h3 {
                    font-size: .53rem;
                    font-family: SourceHanSansCN;
                    padding-top: 0.266rem;
                    font-weight: 800;
                    line-height: .75rem;
                    margin-top: 0.13rem;
                }

                h5 {
                    font-size: .32rem;
                    font-family: SourceHanSansCN;
                    font-weight: 500;
                    color: #333;
                    margin-top: 0.266rem;

                    a {
                        margin-left: 0.11rem;
                    }
                }
            }
        }
    }

    .poklk {
        width: 9.48rem;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        margin-top: 0.4rem;

        span {
            color: #333;
            font-size: .38rem;
            position: relative;
            font-weight: 600;
        }

        a {
            background: url() no-repeat 50%;
            background-size: 100%;
            width: 1.20rem;
            height: 0.21rem;
            margin-top: 0.13rem;
        }
    }

    .renmen {
        .dangeh {
            width: 9.48rem;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;

            .dank {
                width: 30%;
                text-align: center;
                padding: 0.42rem 0;
                background: #fdf7f7;
                border-radius: 0.21rem;
                margin-top: 0.266rem;

                h6 {
                    color: #333;
                    font-size: .37rem;
                }

                .zhangl {
                    font-size: .53rem;
                    margin-top: 0.266rem;
                    font-weight: 600;
                }

                .bili {
                    font-size: .266rem;
                    margin-top: 0.29rem;
                }
            }
        }
    }

    .zhnj {
        width: 100%;
        display: flex;
        height: 1.01rem;
        border-bottom: 0.03rem solid #e0e0e0;
        position: relative;

        span {
            width: 20%;
            text-align: center;
            line-height: 1.01rem;
            color: #333;
            font-size: .37rem;
        }

        .pokl {
            position: absolute;
            width: 0.53rem;
            height: 0.11rem;
            background: #517afa;
            border-radius: 0.05rem;
            bottom: 0;
            left: 10%;
            margin-left: -0.266rem;
        }

        .xuan {
            color: #517afa;
        }
    }

    .kanbox {
        width: 9.48rem;
        margin: 0 auto;
        margin-top: 0.32rem;
        padding-bottom: 0.32rem;
        display: flex;
        justify-content: space-between;

        span {
            color: #666;
            font-size: .35rem;
        }

        .k1 {
            width: 30%;
            padding-left: 0.266rem;
        }

        .k2 {
            width: 25%;
            text-align: center;
        }

        .k4 {
            width: 20%;
            text-align: right;
        }
    }

    .kfgfd {
        height: 1px;
        background: #e0e0e0;
    }

    .everylistmain {
        width: 9.48rem;
        margin: 0 auto;

        .shujuk {
            margin: 0 auto;
            margin-top: 0.40rem;
            padding-bottom: 0.32rem;
            display: flex;
            justify-content: space-between;

            .s1 {
                width: 30%;

                h6 {
                    color: #333;
                    font-size: .37rem;
                    font-weight: 500;
                }

                p {
                    color: #333;
                    font-size: .32rem;
                    margin-top: 0.13rem;

                    span {
                        width: 0.4rem;
                        height: 0.4rem;
                        background: #3b4fde;
                        border-radius: 0.05rem;
                        padding: 0.04rem;
                        text-align: center;
                        line-height: .4rem;
                        color: #fff;
                        font-size: .3rem;
                    }

                    a {
                        display: inline-block;
                        height: 0.4rem;
                        line-height: .4rem;
                        padding: 0 0.11rem;
                        background: rgba(59, 79, 222, .1);
                        border-radius: 0.05rem;
                        color: #3b4fde;
                        font-size: .32rem;
                        vertical-align: middle;
                    }

                    .bj {
                        background: #ea6248;
                    }

                    .sh {
                        background: #aa3bde;
                    }

                    .shbg {
                        color: #aa3bde;
                        background: rgba(170, 59, 222, .1);
                    }

                    .bjbg {
                        color: #ea6248;
                        background: rgba(234, 98, 72, .1);
                    }
                }
            }

            .s2 {
                text-align: center;
                font-size: .4rem;
                margin-top: 0.13rem;
                font-weight: 600;
                width: 25%;
            }

            .s4 {
                width: 20%;
                text-align: right;

                span {
                    display: inline-block;
                    width: 1.34rem;
                    height: 0.67rem;
                    border-radius: 0.13rem;
                    color: #fff;
                    font-size: .35rem;
                    text-align: center;
                    line-height: .67rem;
                }

                a {
                    display: inline-block;
                    width: 1.34rem;
                    height: 0.67rem;
                    border-radius: 0.13rem;
                    color: #fff;
                    font-size: .35rem;
                    text-align: center;
                    line-height: .67rem;
                }

                .hqgreenbtnbg {
                    background: #09965f;
                }

                .hqredbtnbg {
                    background: #f11614;
                }
            }
        }
    }
}
</style>
